import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter_trip/dao/travel_dao.dart';
import 'package:flutter_trip/model/travel_model.dart';
import 'package:flutter_trip/utils/navigator_utils.dart';
import 'package:flutter_trip/widget/loading_container.dart';
import 'package:flutter_trip/widget/webview.dart';
import 'package:transparent_image/transparent_image.dart';

const _TRAVEL_URL =
    'https://m.ctrip.com/restapi/soa2/16189/json/searchTripShootListForHomePageV2?_fxpcqlniredt=09031014111431397988&__gw_appid=99999999&__gw_ver=1.0&__gw_from=10650013707&__gw_platform=H5';

const PAGE_SIZE = 10;

class TravelTabPage extends StatefulWidget {
  final String? travelUrl;
  final Map params;
  final String groupChannelCode;

  const TravelTabPage(
      {Key? key,
      this.travelUrl,
      required this.params,
      required this.groupChannelCode})
      : super(key: key);

  @override
  State<TravelTabPage> createState() => _TravelTabPageState();
}

class _TravelTabPageState extends State<TravelTabPage> {
  List<TravelItem> travelItems = [];
  bool _loading = true;
  ScrollController _scrollController = ScrollController();
  int pageIndex = 1;

  @override
  void initState() {
    _loadData();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        _loadData(loadMore: true);
      }
    });
    super.initState();
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: LoadingContainer(
            child: RefreshIndicator(
              onRefresh: _handlerRefresh,
              child: MediaQuery.removePadding(
                  context: context,
                  removeTop: true,
                  child: StaggeredGridView.countBuilder(
                      controller: _scrollController,
                      crossAxisCount: 4,
                      itemCount: travelItems.length,
                      itemBuilder: (context, index) =>
                          _TravelItem(index: index, item: travelItems[index]),
                      staggeredTileBuilder: (index) =>
                          new StaggeredTile.fit(2))),
            ),
            isLoading: _loading,
            cover: false));
  }

  void _loadData({loadMore = false}) {
    if(loadMore){
      pageIndex++;
    }else{
      pageIndex=1;
    }
    TravelDao.fetch(widget.travelUrl ?? _TRAVEL_URL, widget.params,
            widget.groupChannelCode, pageIndex, PAGE_SIZE)
        .then((model) {
      _loading = false;
      setState(() {
        List<TravelItem> items = _filterItems(model.resultList!);
        travelItems.addAll(items);
      });
      print("${widget.groupChannelCode}网络请求成功");
    }).catchError((e) {
      _loading = false;
      print(e);
    });
  }

  _filterItems(List<TravelItem> resultList) {
    if (resultList == null) {
      return [];
    }
    List<TravelItem> filterItems = [];
    resultList.forEach((item) {
      if (item.article != null) {
        //移除article为空的模型
        filterItems.add(item);
      }
    });
    return filterItems;
  }

  Future<Null> _handlerRefresh() async {
    _loadData();
    return null;
  }
}

class _TravelItem extends StatelessWidget {
  final TravelItem item;
  final int? index;

  const _TravelItem({Key? key, this.index, required this.item})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (item.article.urls.length > 0) {
          NavigatorUtil.push(context, HiWebView(
            url: item.article.urls[0].h5Url,
            title: '详情',
          ));
        }
      },
      child: Card(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _itemImage(context),
            Container(
              padding: EdgeInsets.all(4),
              child: Text(
                item.article.articleTitle,
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(fontSize: 14, color: Colors.black87),
              ),
            ),
            _infoText()
          ],
        ),
      ),
    );
  }

  _itemImage(BuildContext context) {
    final size = MediaQuery.of(context).size;

    return Stack(
      children: [
        Container(
          //设置最小初始高度，防止动态图片高度时的抖动
          constraints: BoxConstraints(
            minHeight: size.width / 2 - 10,
          ),
          //child: Image.network(item.article.images[0].dynamicUrl),
          child: FadeInImage.memoryNetwork(
            placeholder: kTransparentImage,
            image: item.article.images[0].dynamicUrl,
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
            bottom: 8,
            left: 8,
            child: Container(
              padding: EdgeInsets.fromLTRB(5, 1, 5, 1),
              decoration: BoxDecoration(
                  color: Colors.black54,
                  borderRadius: BorderRadius.circular(10)),
              child: Row(
                children: [
                  const Padding(
                    padding: EdgeInsets.only(right: 3),
                    child: Icon(
                      Icons.location_on,
                      color: Colors.white,
                      size: 12,
                    ),
                  ),
                  LimitedBox(
                    maxWidth: 130,
                    child: Text(
                      _poiName(),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(color: Colors.white, fontSize: 12),
                    ),
                  )
                ],
              ),
            ))
      ],
    );
  }

  String _poiName() {
    return item.article.pois == null || item.article.pois?.length == 0
        ? '未知'
        : item.article.pois?[0]?.poiName ?? '未知';
  }

  _infoText() {
    return Container(
      padding: EdgeInsets.fromLTRB(6, 0, 6, 10),
      child: Row(
        children: [
          PhysicalModel(
            color: Colors.transparent,
            clipBehavior: Clip.antiAlias,
            borderRadius: BorderRadius.circular(12),
            child: Image.network(
              item.article.author?.coverImage?.dynamicUrl ?? "",
              width: 24,
              height: 24,
            ),
          ),
          Container(
            padding: EdgeInsets.all(5),
            width: 90,
            child: Text(
              item.article.author?.nickName ?? "",
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(fontSize: 12),
            ),
          )
        ],
      ),
    );
  }
}
